// @use 'theme-transition/scss/mixins.scss' as M;
@tailwind base;
@tailwind components;
@tailwind utilities;

// @include M.theme-transition('[data-theme="dark"]');

@layer components {
  .btn {
    @apply inline-flex-center font-bold py-2 px-4 rounded cursor-pointer;
  }

  .btn-pink {
    @apply btn bg-pink-600 hover:bg-pink-900 text-white;
  }
}

@layer utilities {
  .inline-flex-center {
    @apply inline-flex items-center justify-center;
  }
}

:root {
  --ifm-color-primary: #0ea5e9;
  --ifm-color-primary-dark: #0d95d2;
  --ifm-color-primary-darker: #0c8cc6;
  --ifm-color-primary-darkest: #0a74a3;
  --ifm-color-primary-light: #1eb0f1;
  --ifm-color-primary-lighter: #2ab4f2;
  --ifm-color-primary-lightest: #4dc0f4;
  --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 10%);
  --ifm-toc-border-color: theme('colors.slate.900' / 10%);
}

*,
::after,
::before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

html[data-theme='dark'] {
  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
  --ifm-background-color: theme('colors.slate.900');
  --ifm-navbar-background-color: theme('colors.slate.900');

  /* --ifm-navbar-background-color: initial; */

  --ifm-toc-border-color: theme('colors.slate.50' / 6%);

  /* --ifm-navbar-background-color: rgb(15 23 42); */

  /* background-color: rgb(15 23 42 / var(--tw-bg-opacity)); */
  --ifm-navbar-link-color: theme('colors.slate.200');
  --docsearch-text-color: theme('colors.slate.200');
  --ifm-font-color-base: theme('colors.slate.200');
}

.navbar {
  @apply lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06];

  /* bg-white/95; */

  /* dark:bg-transparent; */

  /* backdrop-blur */
}

.footer {
  @apply lg:border-t lg:border-slate-900/10 dark:border-slate-50/[0.06] dark:bg-transparent;
}

[data-theme='light'] .DocSearch {
  /* --docsearch-primary-color: var(--ifm-color-primary); */

  /* --docsearch-text-color: var(--ifm-font-color-base); */
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgb(94 100 112 / 70%);

  /* Modal */
  --docsearch-modal-background: var(--ifm-color-secondary-lighter);

  /* Search box */
  --docsearch-searchbox-background: var(--ifm-color-secondary);
  --docsearch-searchbox-focus-background: var(--ifm-color-white);

  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-white);

  /* Footer */
  --docsearch-footer-background: var(--ifm-color-white);
}

[data-theme='dark'] .DocSearch {
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgb(47 55 69 / 70%);

  /* Modal */
  --docsearch-modal-background: var(--ifm-background-color);

  /* Search box */
  --docsearch-searchbox-background: var(--ifm-background-color);
  --docsearch-searchbox-focus-background: var(--ifm-color-black);

  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-emphasis-100);

  /* Footer */
  --docsearch-footer-background: var(--ifm-background-surface-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--ifm-color-emphasis-200) 0%,
    var(--ifm-color-emphasis-100) 100%
  );
}

.from-weapp-to-tailwindcss {
  color: transparent;
  background-image: linear-gradient(to right, #07c160 50%, theme('colors.sky.500') 50%);
  background-clip: text;
}

// .glow {
//   width: 500px;
//   height: 300px;
//   background: radial-gradient(circle at 30% 50%, rgb(255 0 255 / 80%), rgb(0 0 255 / 30%), transparent 70%);
//   filter: blur(50px);
//   border-radius: 50%;
// }

.light-effect {
  width: 300px; /* 缩小光照范围 */
  height: 1800px;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 15%) 0%,
    rgb(255 255 255 / 10%) 30%,
    rgb(255 255 255 / 10%) 70%,
    transparent 100%
  );
  filter: blur(40px);
  border-radius: 80%; /* 让光照形状更加柔和 */
  opacity: 0.4;
  transform: translate(0, -500px) rotate(-50deg);

  // transform: translate(0, -100px) rotate(-30deg); /* 定位并倾斜光束 */
}
